{% extends 'base.html' %}

{% block title %}成绩管理 - 校园生活助手系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏导航 -->
        <div class="col-md-3 sidebar">
            <div class="sidebar-content">
                <h3 class="sidebar-title">成绩管理</h3>
                <ul class="sidebar-menu">
                    <li class="sidebar-menu-item active">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-tachometer mr-2"></i>成绩概览
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-book mr-2"></i>课程成绩管理
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-pencil-square-o mr-2"></i>成绩录入
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-calculator mr-2"></i>成绩统计
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-bar-chart mr-2"></i>成绩分析
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-file-text-o mr-2"></i>成绩报告
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-question-circle mr-2"></i>成绩申诉管理
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-cog mr-2"></i>评分标准设置
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="col-md-9 main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">成绩管理</h1>
                <div class="page-actions">
                    <div class="course-selector">
                        <select class="form-control">
                            <option value="all">所有课程</option>
                            <option value="cs101">计算机网络基础</option>
                            <option value="ds201">数据结构与算法</option>
                            <option value="db301">数据库系统原理</option>
                            <option value="ai401">人工智能导论</option>
                            <option value="prog101">程序设计基础</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" id="import-scores-btn">
                        <i class="fa fa-upload mr-1"></i>导入成绩
                    </button>
                    <button class="btn btn-secondary" id="export-reports-btn">
                        <i class="fa fa-download mr-1"></i>导出报表
                    </button>
                </div>
            </div>
            
            <!-- 成绩概览 -->
            <div class="section score-overview">
                <h2 class="section-title">成绩概览</h2>
                <div class="overview-cards">
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">180</div>
                            <div class="overview-card-title">管理学生数</div>
                        </div>
                    </div>
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <i class="fa fa-book"></i>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">5</div>
                            <div class="overview-card-title">当前教授课程</div>
                        </div>
                    </div>
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <div class="progress-ring">
                                <svg class="progress-ring-circle" viewBox="0 0 36 36">
                                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="transparent" stroke-width="3" stroke="#ddd"></path>
                                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="transparent" stroke-width="3" stroke="#36a2eb" stroke-dasharray="86.95" stroke-dashoffset="13.04"></path>
                                </svg>
                                <span class="progress-ring-text">85%</span>
                            </div>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">85%</div>
                            <div class="overview-card-title">成绩录入完成率</div>
                        </div>
                    </div>
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <i class="fa fa-exclamation-circle"></i>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">3</div>
                            <div class="overview-card-title">待处理成绩申诉</div>
                        </div>
                    </div>
                </div>
                
                <!-- 成绩统计图表 -->
                <div class="charts-container">
                    <div class="chart-item">
                        <h3 class="chart-title">学生成绩分布</h3>
                        <div class="chart-wrapper">
                            <canvas id="scoreDistributionChart"></canvas>
                        </div>
                    </div>
                    <div class="chart-item">
                        <h3 class="chart-title">各课程平均分</h3>
                        <div class="chart-wrapper">
                            <canvas id="courseAverageChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 标签页导航 -->
            <div class="tabs">
                <ul class="tab-list">
                    <li class="tab-item">
                        <a href="#all-courses" class="tab-link active">所有课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#ongoing-courses" class="tab-link">进行中课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#completed-courses" class="tab-link">已完成课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#score-appeals" class="tab-link">成绩申诉</a>
                    </li>
                    <li class="tab-item">
                        <a href="#grade-settings" class="tab-link">评分设置</a>
                    </li>
                </ul>
            </div>
            
            <!-- 课程列表 -->
            <div class="tab-content">
                <!-- 所有课程 -->
                <div id="all-courses" class="tab-pane active">
                    <div class="course-list-container">
                        <div class="course-items">
                            <div class="course-item">
                                <div class="course-header">
                                    <h3 class="course-title">计算机网络基础</h3>
                                    <div class="course-meta">
                                        <span class="course-code">CS101</span>
                                        <span class="course-semester">2023-2024学年第一学期</span>
                                        <span class="course-credit">3学分</span>
                                    </div>
                                </div>
                                <div class="course-stats">
                                    <div class="stat-item">
                                        <div class="stat-value">45</div>
                                        <div class="stat-label">学生人数</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">86.5</div>
                                        <div class="stat-label">平均分</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">90%</div>
                                        <div class="stat-label">录入进度</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">1</div>
                                        <div class="stat-label">成绩申诉</div>
                                    </div>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary btn-sm">录入成绩</button>
                                    <button class="btn btn-outline-secondary btn-sm">查看详情</button>
                                    <button class="btn btn-outline-secondary btn-sm">成绩分析</button>
                                </div>
                            </div>
                            
                            <div class="course-item">
                                <div class="course-header">
                                    <h3 class="course-title">数据结构与算法</h3>
                                    <div class="course-meta">
                                        <span class="course-code">DS201</span>
                                        <span class="course-semester">2023-2024学年第一学期</span>
                                        <span class="course-credit">4学分</span>
                                    </div>
                                </div>
                                <div class="course-stats">
                                    <div class="stat-item">
                                        <div class="stat-value">42</div>
                                        <div class="stat-label">学生人数</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">82.3</div>
                                        <div class="stat-label">平均分</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">85%</div>
                                        <div class="stat-label">录入进度</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">2</div>
                                        <div class="stat-label">成绩申诉</div>
                                    </div>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary btn-sm">录入成绩</button>
                                    <button class="btn btn-outline-secondary btn-sm">查看详情</button>
                                    <button class="btn btn-outline-secondary btn-sm">成绩分析</button>
                                </div>
                            </div>
                            
                            <div class="course-item">
                                <div class="course-header">
                                    <h3 class="course-title">数据库系统原理</h3>
                                    <div class="course-meta">
                                        <span class="course-code">DB301</span>
                                        <span class="course-semester">2023-2024学年第一学期</span>
                                        <span class="course-credit">3学分</span>
                                    </div>
                                </div>
                                <div class="course-stats">
                                    <div class="stat-item">
                                        <div class="stat-value">38</div>
                                        <div class="stat-label">学生人数</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">88.7</div>
                                        <div class="stat-label">平均分</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">100%</div>
                                        <div class="stat-label">录入进度</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">0</div>
                                        <div class="stat-label">成绩申诉</div>
                                    </div>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-outline-secondary btn-sm">查看详情</button>
                                    <button class="btn btn-outline-secondary btn-sm">成绩分析</button>
                                    <button class="btn btn-outline-secondary btn-sm">发布成绩</button>
                                </div>
                            </div>
                            
                            <div class="course-item">
                                <div class="course-header">
                                    <h3 class="course-title">人工智能导论</h3>
                                    <div class="course-meta">
                                        <span class="course-code">AI401</span>
                                        <span class="course-semester">2023-2024学年第一学期</span>
                                        <span class="course-credit">3学分</span>
                                    </div>
                                </div>
                                <div class="course-stats">
                                    <div class="stat-item">
                                        <div class="stat-value">25</div>
                                        <div class="stat-label">学生人数</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">84.2</div>
                                        <div class="stat-label">平均分</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">75%</div>
                                        <div class="stat-label">录入进度</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">0</div>
                                        <div class="stat-label">成绩申诉</div>
                                    </div>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary btn-sm">录入成绩</button>
                                    <button class="btn btn-outline-secondary btn-sm">查看详情</button>
                                    <button class="btn btn-outline-secondary btn-sm">成绩分析</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 分页控制 -->
                        <div class="pagination">
                            <span class="pagination-item">
                                <a href="#" class="pagination-link disabled">&laquo;</a>
                            </span>
                            <span class="pagination-item">
                                <a href="#" class="pagination-link active">1</a>
                            </span>
                            <span class="pagination-item">
                                <a href="#" class="pagination-link">2</a>
                            </span>
                            <span class="pagination-item">
                                <a href="#" class="pagination-link">&raquo;</a>
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- 进行中课程 -->
                <div id="ongoing-courses" class="tab-pane">
                    <div class="course-list-container">
                        <!-- 内容会通过JavaScript动态加载 -->
                    </div>
                </div>
                
                <!-- 已完成课程 -->
                <div id="completed-courses" class="tab-pane">
                    <div class="course-list-container">
                        <!-- 内容会通过JavaScript动态加载 -->
                    </div>
                </div>
                
                <!-- 成绩申诉 -->
                <div id="score-appeals" class="tab-pane">
                    <div class="appeal-list-container">
                        <!-- 内容会通过JavaScript动态加载 -->
                    </div>
                </div>
                
                <!-- 评分设置 -->
                <div id="grade-settings" class="tab-pane">
                    <div class="settings-container">
                        <!-- 内容会通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
            
            <!-- 近期任务提醒 -->
            <div class="section recent-tasks">
                <h2 class="section-title">近期任务提醒</h2>
                <div class="tasks-container">
                    <div class="task-item">
                        <div class="task-info">
                            <div class="task-icon">
                                <i class="fa fa-clock-o text-warning"></i>
                            </div>
                            <div class="task-details">
                                <h3 class="task-title">数据结构与算法成绩录入截止</h3>
                                <p class="task-description">距离成绩录入截止还有3天，请及时完成所有学生的成绩录入工作。</p>
                                <div class="task-meta">
                                    <span class="task-date">2023-12-15 截止</span>
                                    <span class="task-status pending">待完成</span>
                                </div>
                            </div>
                        </div>
                        <div class="task-actions">
                            <button class="btn btn-sm btn-primary">立即处理</button>
                        </div>
                    </div>
                    
                    <div class="task-item">
                        <div class="task-info">
                            <div class="task-icon">
                                <i class="fa fa-exclamation-circle text-danger"></i>
                            </div>
                            <div class="task-details">
                                <h3 class="task-title">处理成绩申诉</h3>
                                <p class="task-description">您有3个待处理的成绩申诉请求，需要在5个工作日内完成处理。</p>
                                <div class="task-meta">
                                    <span class="task-date">紧急</span>
                                    <span class="task-status urgent">紧急</span>
                                </div>
                            </div>
                        </div>
                        <div class="task-actions">
                            <button class="btn btn-sm btn-primary">处理申诉</button>
                        </div>
                    </div>
                    
                    <div class="task-item">
                        <div class="task-info">
                            <div class="task-icon">
                                <i class="fa fa-calendar text-info"></i>
                            </div>
                            <div class="task-details">
                                <h3 class="task-title">发布计算机网络基础成绩</h3>
                                <p class="task-description">计算机网络基础课程成绩录入已完成90%，完成后即可发布成绩。</p>
                                <div class="task-meta">
                                    <span class="task-date">2023-12-20 前</span>
                                    <span class="task-status pending">待完成</span>
                                </div>
                            </div>
                        </div>
                        <div class="task-actions">
                            <button class="btn btn-sm btn-primary">查看进度</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 成绩录入快速入口 -->
            <div class="section quick-entry">
                <h2 class="section-title">成绩录入快速入口</h2>
                <div class="quick-entry-container">
                    <div class="quick-entry-item">
                        <div class="quick-entry-icon">
                            <i class="fa fa-pencil-square-o"></i>
                        </div>
                        <div class="quick-entry-content">
                            <h3 class="quick-entry-title">批量录入成绩</h3>
                            <p class="quick-entry-description">通过Excel模板批量导入学生成绩，提高录入效率</p>
                        </div>
                        <div class="quick-entry-action">
                            <button class="btn btn-primary">进入</button>
                        </div>
                    </div>
                    
                    <div class="quick-entry-item">
                        <div class="quick-entry-icon">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="quick-entry-content">
                            <h3 class="quick-entry-title">单个学生录入</h3>
                            <p class="quick-entry-description">逐一对学生成绩进行录入和调整，适用于少量成绩录入</p>
                        </div>
                        <div class="quick-entry-action">
                            <button class="btn btn-primary">进入</button>
                        </div>
                    </div>
                    
                    <div class="quick-entry-item">
                        <div class="quick-entry-icon">
                            <i class="fa fa-cog"></i>
                        </div>
                        <div class="quick-entry-content">
                            <h3 class="quick-entry-title">成绩计算公式设置</h3>
                            <p class="quick-entry-description">设置平时成绩、期中考试、期末考试等各项成绩的权重和计算方式</p>
                        </div>
                        <div class="quick-entry-action">
                            <button class="btn btn-primary">设置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 标签页切换功能
        const tabLinks = document.querySelectorAll('.tab-link');
        tabLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动标签
                document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
                
                // 添加当前活动标签
                this.classList.add('active');
                const targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).classList.add('active');
                
                // 加载对应标签页的数据
                loadTabData(targetId);
            });
        });
        
        // 导入成绩按钮点击事件
        document.getElementById('import-scores-btn').addEventListener('click', function() {
            // 实际项目中这里会有导入成绩的逻辑
            alert('即将打开成绩导入界面！实际项目中会提供Excel模板下载和上传功能');
        });
        
        // 导出报表按钮点击事件
        document.getElementById('export-reports-btn').addEventListener('click', function() {
            // 实际项目中这里会有导出报表的逻辑
            alert('即将导出成绩报表！实际项目中会生成并下载成绩统计报表');
        });
        
        // 课程选择变更事件
        const courseSelector = document.querySelector('.course-selector select');
        courseSelector.addEventListener('change', function() {
            // 实际项目中这里会有切换课程的逻辑
            const selectedCourse = this.options[this.selectedIndex].text;
            alert(`已切换到课程：${selectedCourse}！实际项目中会加载该课程的成绩数据`);
        });
        
        // 课程卡片上的按钮点击事件
        const courseButtons = document.querySelectorAll('.course-actions button');
        courseButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 获取课程信息
                const courseItem = this.closest('.course-item');
                const courseName = courseItem.querySelector('.course-title').textContent;
                const buttonText = this.textContent.trim();
                
                if (buttonText === '录入成绩') {
                    alert(`即将进入${courseName}的成绩录入页面！实际项目中会跳转到成绩录入页面`);
                } else if (buttonText === '查看详情') {
                    alert(`即将查看${courseName}的成绩详情！实际项目中会跳转到课程成绩详情页面`);
                } else if (buttonText === '成绩分析') {
                    alert(`即将查看${courseName}的成绩分析！实际项目中会显示该课程的成绩分析报告`);
                } else if (buttonText === '发布成绩') {
                    if (confirm(`确定要发布${courseName}的成绩吗？发布后学生将可以查看自己的成绩。`)) {
                        alert(`${courseName}的成绩已发布！`);
                    }
                }
            });
        });
        
        // 任务项上的按钮点击事件
        const taskButtons = document.querySelectorAll('.task-actions button');
        taskButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 获取任务信息
                const taskItem = this.closest('.task-item');
                const taskTitle = taskItem.querySelector('.task-title').textContent;
                
                if (taskTitle.includes('数据结构与算法')) {
                    alert('即将进入数据结构与算法课程的成绩录入页面！');
                } else if (taskTitle.includes('成绩申诉')) {
                    alert('即将进入成绩申诉处理页面！');
                } else if (taskTitle.includes('计算机网络基础')) {
                    alert('即将查看计算机网络基础课程的成绩录入进度！');
                }
            });
        });
        
        // 快速入口按钮点击事件
        const quickEntryButtons = document.querySelectorAll('.quick-entry-action button');
        quickEntryButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 获取快速入口信息
                const quickEntryItem = this.closest('.quick-entry-item');
                const quickEntryTitle = quickEntryItem.querySelector('.quick-entry-title').textContent;
                
                if (quickEntryTitle.includes('批量录入')) {
                    alert('即将进入批量成绩录入页面！实际项目中会提供模板下载和上传功能');
                } else if (quickEntryTitle.includes('单个学生')) {
                    alert('即将进入单个学生成绩录入页面！实际项目中会跳转到单个学生成绩录入界面');
                } else if (quickEntryTitle.includes('计算公式')) {
                    alert('即将进入成绩计算公式设置页面！实际项目中会打开成绩计算规则配置界面');
                }
            });
        });
        
        // 分页链接点击事件
        const paginationLinks = document.querySelectorAll('.pagination-link:not(.disabled)');
        paginationLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                if (this.classList.contains('active')) {
                    return;
                }
                
                // 实际项目中这里会有分页加载数据的逻辑
                const pageText = this.textContent.trim();
                let pageNum = 1;
                
                if (pageText === '1' || pageText === '2') {
                    pageNum = parseInt(pageText);
                } else if (pageText === '»') {
                    pageNum = 2; // 假设是下一页
                } else if (pageText === '«') {
                    pageNum = 1; // 假设是上一页
                }
                
                // 更新活动页码
                document.querySelectorAll('.pagination-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');
                
                alert(`即将跳转到第${pageNum}页！实际项目中会加载该页的课程数据`);
            });
        });
        
        // 侧边栏菜单点击事件
        const sidebarLinks = document.querySelectorAll('.sidebar-menu-link');
        sidebarLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动菜单
                document.querySelectorAll('.sidebar-menu-item').forEach(item => item.classList.remove('active'));
                
                // 添加当前活动菜单
                this.closest('.sidebar-menu-item').classList.add('active');
                
                // 实际项目中这里会有切换不同功能页面的逻辑
                const menuText = this.textContent.trim();
                alert(`即将跳转到：${menuText}页面！实际项目中会跳转到相应的功能页面`);
            });
        });
        
        // 模拟加载成绩分布图表
        if (typeof Chart !== 'undefined') {
            // 成绩分布图表
            const distributionCtx = document.getElementById('scoreDistributionChart').getContext('2d');
            new Chart(distributionCtx, {
                type: 'bar',
                data: {
                    labels: ['优秀', '良好', '中等', '及格', '不及格'],
                    datasets: [{
                        label: '学生人数',
                        data: [45, 68, 32, 15, 8],
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(153, 102, 255, 0.7)',
                            'rgba(255, 99, 132, 0.7)'
                        ],
                        borderColor: [
                            'rgba(54, 162, 235, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 99, 132, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 各课程平均分图表
            const averageCtx = document.getElementById('courseAverageChart').getContext('2d');
            new Chart(averageCtx, {
                type: 'line',
                data: {
                    labels: ['计算机网络基础', '数据结构与算法', '数据库系统原理', '人工智能导论', '程序设计基础'],
                    datasets: [{
                        label: '平均分',
                        data: [86.5, 82.3, 88.7, 84.2, 87.5],
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 2,
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 70
                        }
                    }
                }
            });
        } else {
            console.log('Chart.js is not loaded. Charts will not be rendered.');
        }
        
        // 加载标签页数据
        function loadTabData(tabId) {
            // 实际项目中这里会根据tabId加载不同的数据
            const container = document.getElementById(tabId).querySelector('.course-list-container, .appeal-list-container, .settings-container');
            
            if (!container.hasChildNodes() || container.children.length === 0) {
                // 显示加载中提示
                container.innerHTML = '<div class="loading">加载中...</div>';
                
                // 模拟异步加载数据
                setTimeout(() => {
                    let contentHtml = '';
                    
                    if (tabId === 'ongoing-courses') {
                        // 复制并修改部分课程作为进行中课程
                        const allCourses = document.querySelectorAll('#all-courses .course-item');
                        contentHtml = '<div class="course-items">';
                        
                        allCourses.forEach((course, index) => {
                            if (index < 3) { // 只显示部分课程
                                const courseClone = course.cloneNode(true);
                                contentHtml += courseClone.outerHTML;
                            }
                        });
                        
                        contentHtml += '</div>';
                    } else if (tabId === 'completed-courses') {
                        // 复制并修改部分课程作为已完成课程
                        const allCourses = document.querySelectorAll('#all-courses .course-item');
                        contentHtml = '<div class="course-items">';
                        
                        allCourses.forEach((course, index) => {
                            if (index >= 3) { // 只显示部分课程
                                const courseClone = course.cloneNode(true);
                                contentHtml += courseClone.outerHTML;
                            }
                        });
                        
                        contentHtml += '</div>';
                    } else if (tabId === 'score-appeals') {
                        // 成绩申诉列表
                        contentHtml = `
                            <div class="appeal-items">
                                <div class="appeal-item">
                                    <div class="appeal-header">
                                        <h3 class="appeal-title">数据结构与算法 - 张三</h3>
                                        <div class="appeal-meta">
                                            <span class="appeal-date">2023-12-10</span>
                                            <span class="appeal-status pending">待处理</span>
                                        </div>
                                    </div>
                                    <div class="appeal-content">
                                        <p>我对期末成绩有疑问，希望能够核对一下试卷分数，谢谢老师。</p>
                                    </div>
                                    <div class="appeal-actions">
                                        <button class="btn btn-sm btn-primary">处理</button>
                                        <button class="btn btn-sm btn-outline-secondary">详情</button>
                                    </div>
                                </div>
                                
                                <div class="appeal-item">
                                    <div class="appeal-header">
                                        <h3 class="appeal-title">数据结构与算法 - 李四</h3>
                                        <div class="appeal-meta">
                                            <span class="appeal-date">2023-12-09</span>
                                            <span class="appeal-status pending">待处理</span>
                                        </div>
                                    </div>
                                    <div class="appeal-content">
                                        <p>我的实验成绩与预期相差较大，希望老师能够复查一下平时实验的评分。</p>
                                    </div>
                                    <div class="appeal-actions">
                                        <button class="btn btn-sm btn-primary">处理</button>
                                        <button class="btn btn-sm btn-outline-secondary">详情</button>
                                    </div>
                                </div>
                            </div>
                        `;
                    } else if (tabId === 'grade-settings') {
                        // 评分标准设置
                        contentHtml = `
                            <div class="settings-form">
                                <div class="form-group">
                                    <label>课程</label>
                                    <select class="form-control">
                                        <option value="cs101">计算机网络基础</option>
                                        <option value="ds201">数据结构与算法</option>
                                        <option value="db301">数据库系统原理</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label>平时成绩权重</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" value="30">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>期中考试权重</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" value="30">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>期末考试权重</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" value="40">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>成绩等级设置</label>
                                    <div class="grade-levels">
                                        <div class="grade-level">
                                            <label>优秀</label>
                                            <input type="number" class="form-control" value="90">
                                        </div>
                                        <div class="grade-level">
                                            <label>良好</label>
                                            <input type="number" class="form-control" value="80">
                                        </div>
                                        <div class="grade-level">
                                            <label>中等</label>
                                            <input type="number" class="form-control" value="70">
                                        </div>
                                        <div class="grade-level">
                                            <label>及格</label>
                                            <input type="number" class="form-control" value="60">
                                        </div>
                                    </div>
                                </div>
                                
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        `;
                    }
                    
                    container.innerHTML = contentHtml;
                    
                    // 重新绑定事件
                    bindLoadedDataEvents(tabId);
                }, 500);
            }
        }
        
        // 绑定加载数据后的事件
        function bindLoadedDataEvents(tabId) {
            if (tabId === 'ongoing-courses' || tabId === 'completed-courses') {
                // 绑定课程卡片上的按钮事件
                const courseButtons = document.querySelectorAll(`#${tabId} .course-actions button`);
                courseButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const courseItem = this.closest('.course-item');
                        const courseName = courseItem.querySelector('.course-title').textContent;
                        const buttonText = this.textContent.trim();
                        
                        if (buttonText === '录入成绩') {
                            alert(`即将进入${courseName}的成绩录入页面！`);
                        } else if (buttonText === '查看详情') {
                            alert(`即将查看${courseName}的成绩详情！`);
                        } else if (buttonText === '成绩分析') {
                            alert(`即将查看${courseName}的成绩分析！`);
                        } else if (buttonText === '发布成绩') {
                            if (confirm(`确定要发布${courseName}的成绩吗？`)) {
                                alert(`${courseName}的成绩已发布！`);
                            }
                        }
                    });
                });
            } else if (tabId === 'score-appeals') {
                // 绑定成绩申诉处理按钮事件
                const appealButtons = document.querySelectorAll(`#${tabId} .appeal-actions button`);
                appealButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const appealItem = this.closest('.appeal-item');
                        const appealTitle = appealItem.querySelector('.appeal-title').textContent;
                        const buttonText = this.textContent.trim();
                        
                        if (buttonText === '处理') {
                            alert(`即将处理${appealTitle}的成绩申诉！`);
                        } else if (buttonText === '详情') {
                            alert(`即将查看${appealTitle}的成绩申诉详情！`);
                        }
                    });
                });
            } else if (tabId === 'grade-settings') {
                // 绑定评分设置保存按钮事件
                const saveButton = document.querySelector(`#${tabId} .btn-primary`);
                saveButton.addEventListener('click', function() {
                    alert('评分标准设置已保存！');
                });
            }
        }
        
        // 页面载入动画效果
        const fadeElements = document.querySelectorAll('.section, .overview-card, .course-item, .task-item, .quick-entry-item');
        fadeElements.forEach((element, index) => {
            setTimeout(() => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 10);
            }, index * 100);
        });
        
        // 响应式调整
        function adjustForResponsive() {
            const isMobile = window.innerWidth < 768;
            
            // 在移动端隐藏侧边栏，显示顶部菜单按钮（实际项目中会有相应的实现）
            const sidebar = document.querySelector('.sidebar');
            if (isMobile) {
                // 实际项目中这里会有移动端适配的逻辑
            }
            
            // 在移动端调整图表显示方式
            const charts = document.querySelectorAll('.chart-item');
            charts.forEach(chart => {
                if (isMobile) {
                    chart.classList.add('full-width');
                } else {
                    chart.classList.remove('full-width');
                }
            });
        }
        
        // 初始调整和窗口大小改变时调整
        adjustForResponsive();
        window.addEventListener('resize', adjustForResponsive);
    });
</script>
{% endblock %}